import { Button, Card, InputNumber, message } from "antd";
import * as React from "react";
import { MyAxios } from "../../../../common/config/http";
import { PAY_ORDER_TYPE_MAPPING } from "../view";

const View = () => {
  const MONTH_PRICE = 288; //一个月的单价
  const DAY_PRICE = 15; //一天的单价
  const MONTH_DAY_COUNT = 30; //定义一个月的天数
  const [monthCount, setMonthCount] = React.useState<number>(1); //购买月数

  // 购买
  function doBuyForMonth() {
    const newTab:any = window.open();
    MyAxios.axios
      .post<any, string>(
        "/alipay/view/pay",
        {
          payMoney: monthCount * MONTH_PRICE,
          orderType: PAY_ORDER_TYPE_MAPPING.月_15秒版,
          dayCount: monthCount * MONTH_DAY_COUNT,
          subject: "proxyIp",
          body: "body"
        },
        { headers: { ...MyAxios.getToken() } }
      )
      .then(msg => {
        console.log("res", msg);
        const div = document.createElement("div");
        div.innerHTML = msg; // html code
        newTab.document.body.appendChild(div);
        newTab.document.forms.punchout_form.submit();
      });
  }

  // 购买一天
  function doBuyForOneDay() {
    const newTab:any = window.open();
    MyAxios.axios
      .post<any, string>(
        "/alipay/view/pay",
        {
          payMoney: DAY_PRICE,
          orderType: PAY_ORDER_TYPE_MAPPING.天_15秒版,
          dayCount: 1,
          subject: "proxyIp",
          body: "body"
        },
        { headers: { ...MyAxios.getToken() } }
      )
      .then(msg => {
        console.log("res", msg);
        const div = document.createElement("div");
        div.innerHTML = msg; // html code
        newTab.document.body.appendChild(div);
        newTab.document.forms.punchout_form.submit();
      });
  }

  return (
    <Card
      actions={[
        <InputNumber
          onChange={value => {
            value && setMonthCount(value);
          }}
          min={1}
          defaultValue={monthCount}
          max={100}
          formatter={value => `${value} 个月`}
          parser={value => (value ? value.replace(" 个月", "") : "")}
        />,
        <Button icon="shopping-cart" onClick={doBuyForMonth} type="primary">
          立即购买
        </Button>,
        <Button title={`价格:${DAY_PRICE}`} onClick={doBuyForOneDay}>
          购买一天
        </Button>
      ]}
      title={
        <div style={{ textAlign: "center" }}>
          <p>
            <b>15秒版</b>
          </p>
          <span>快速,稳定,15秒内只可调用一次API</span>
        </div>
      }
      bordered={true}
    >
      <div style={{ fontSize: "18px", textAlign: "center" }}>
        <p>
          RMB <span style={{ fontSize: "40px" }}>{MONTH_PRICE}</span>
          /月
        </p>
        <br />
        <br />
        <p>高匿,HTTPS/HTTP/Socket5</p>
        <br />
        <p>
          独享<b>10M</b>带宽
        </p>
      </div>
    </Card>
  );
};

export default View;
